<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Inter%3Awght%40400%3B500%3B600%3B700%3B900&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900" onload="this.rel='stylesheet'" rel="stylesheet"/>
<title>AI Agent Interaction</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style type="text/tailwindcss">
      :root {
        --primary-color: #dce8f3;
        --secondary-color: #f1f2f4;
        --text-primary: #121416;
        --text-secondary: #6a7681;
        --border-color: #dde1e3;
      }
      body {
        font-family: Inter, "Noto Sans", sans-serif;
      }
      .select-wrapper::after {
        content: var(--select-button-svg);
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
      }
    </style>
</head>
<body class="bg-white text-[var(--text-primary)]">
<div class="relative flex size-full min-h-screen flex-col group/design-root overflow-x-hidden" style="--select-button-svg: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724px%27 height=%2724px%27 fill=%27rgb(106,118,129)%27 viewBox=%270 0 256 256%27%3e%3cpath d=%27M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z%27%3e%3c/path%3e%3c/svg%3e');">
<div class="flex h-screen">
<aside class="w-80 bg-[var(--secondary-color)] border-r border-[var(--border-color)] flex flex-col">
<div class="p-6 border-b border-[var(--border-color)]">
<h2 class="text-[var(--text-primary)] text-xl font-semibold">Conversations</h2>
</div>
<div class="flex-grow overflow-y-auto">
<nav class="py-2">
<a class="flex items-center gap-3 px-6 py-3 hover:bg-[var(--primary-color)] transition-colors duration-150" href="#">
<div class="flex items-center justify-center rounded-lg bg-white text-[var(--text-primary)] shrink-0 size-10 border border-[var(--border-color)]">
<svg fill="currentColor" height="20px" viewBox="0 0 256 256" width="20px" xmlns="http://www.w3.org/2000/svg">
<path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z"></path>
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-[var(--text-primary)] line-clamp-1">Analyze sales data</p>
<p class="text-xs text-[var(--text-secondary)] line-clamp-1">2024-01-20</p>
</div>
</a>
<a class="flex items-center gap-3 px-6 py-3 hover:bg-[var(--primary-color)] transition-colors duration-150 bg-[var(--primary-color)]" href="#">
<div class="flex items-center justify-center rounded-lg bg-white text-[var(--text-primary)] shrink-0 size-10 border border-[var(--border-color)]">
<svg fill="currentColor" height="20px" viewBox="0 0 256 256" width="20px" xmlns="http://www.w3.org/2000/svg">
<path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z"></path>
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-[var(--text-primary)] line-clamp-1">Customer feedback analysis</p>
<p class="text-xs text-[var(--text-secondary)] line-clamp-1">2024-01-19</p>
</div>
</a>
</nav>
</div>
</aside>
<main class="flex-1 flex flex-col bg-white">
<header class="p-6 border-b border-[var(--border-color)]">
<h1 class="text-xl font-semibold text-[var(--text-primary)]">AI Agent Interaction</h1>
</header>
<div class="flex-grow p-6 space-y-6 overflow-y-auto">
<div class="flex items-start gap-3 max-w-xl">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 shrink-0 border border-[var(--border-color)]" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA4n3DwFF_4CNdc8KTvA2uXnmTH-I7iEupK77SfzgVWYK6v-FjOSOhvjwEkGvqMN9B8r86A1Q-LF4YtROUFNBbWTtvCpBGN2DK3zy14M-iXKd9ou5NrsnOhjL8Qb6vSU3xNnmEfM5aRUyanRT44g-zl-AZjh8JUr9SsXWIYmXzPWm4KKzmR6Y8bagxnBuOGpO5-P2ub-KovZJqiPTtEUwfZm2mrz1tbfHs3Tg_gOYKxa2G35mcmStmYpeQjsIUKyDo9LryrblyB1-07");'></div>
<div class="flex flex-col gap-1">
<p class="text-xs text-[var(--text-secondary)]">Agent</p>
<div class="text-sm font-normal leading-relaxed rounded-lg px-4 py-2.5 bg-[var(--secondary-color)] text-[var(--text-primary)]">
                  Hello, I'm ready to assist with your data analysis. Please provide your instructions and select a data source.
                </div>
</div>
</div>
<div class="flex items-start gap-3 max-w-xl ml-auto justify-end">
<div class="flex flex-col gap-1 items-end">
<p class="text-xs text-[var(--text-secondary)]">User</p>
<div class="text-sm font-normal leading-relaxed rounded-lg px-4 py-2.5 bg-[var(--primary-color)] text-[var(--text-primary)]">Analyze sales data for the last quarter.</div>
</div>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 shrink-0 border border-[var(--border-color)]" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDVUBlNg0ACI3inGKAOmj4WWYKHk5t7mFjgzcf0dHCWQqXjV8WGh4n8OUWp7k-qmDg_9hQYkAnPoBQNPlwY62pZ0-x0A9A_YxLKSOnVTVk4H03HrMDQ6S-Zo-i5tq7K3iMc8amMCGAn6XqOrZPHagqRVgmEQFswCtccKdsIVK6A0rQ137HDvnUo20YIbADYiXphdg0BBQoCV58Fnw5ZC_v9lJW5loaqlsWa61j2MNoulSsFivZPxKMQbU9c3sIKl5XpWRGiTqasBz8D");'></div>
</div>
<div class="flex items-start gap-3 max-w-xl">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 shrink-0 border border-[var(--border-color)]" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCtSYF8Yxc5_NrvJcw0ezjYV5rluO05Uo-y0cSf8LFtyeYvy8gjtzsVQZnse1lxKFtgwC_XAXUX93QBR_8J3ew6kwkaRubup5ZA2CM_9R879EM6ZzKCRZ77QfnHrl44ytByl-cjnJf8M4Yid4Gfue0PcnWLuVUT-FCi-uZHI0JizgRG7ySeosWL9RCUjZtPUJ0N412zAoCEdycYCX5FCJommYKM9dIz7PcXiu8NgTLOUk4zIcRAgZXq87QW59CVGjyHMXBmd4sTmKWK");'></div>
<div class="flex flex-col gap-1">
<p class="text-xs text-[var(--text-secondary)]">Agent</p>
<div class="text-sm font-normal leading-relaxed rounded-lg px-4 py-2.5 bg-[var(--secondary-color)] text-[var(--text-primary)] overflow-x-auto">
<p>Here's the sales data analysis for the last quarter:</p>
<table class="min-w-full divide-y divide-gray-300 my-2">
<thead class="bg-gray-100">
<tr>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" scope="col">Product</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" scope="col">Sales</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" scope="col">Revenue</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">Product A</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">1000</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">$50,000</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">Product B</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">1500</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">$75,000</td>
</tr>
<tr>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">Product C</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">800</td>
<td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">$40,000</td>
</tr>
</tbody>
</table>
<p>Total Sales: 3300</p>
<p>Total Revenue: $165,000</p>
</div>
</div>
</div>
</div>
<div class="border-t border-[var(--border-color)] p-6 bg-white">
<div class="space-y-4">
<div class="relative select-wrapper">
<label class="sr-only" for="context-selector">Context Selector</label>
<select class="form-select appearance-none block w-full pl-3 pr-10 py-2.5 text-sm rounded-lg border border-[var(--border-color)] bg-white focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]" id="context-selector">
<option selected="">Select Data Source (e.g., Sales Q4 2023)</option>
<option value="sales_q4_2023">Sales Q4 2023</option>
<option value="customer_feedback_jan">Customer Feedback Jan</option>
<option value="market_trends_report">Market Trends Report</option>
</select>
</div>
<div>
<label class="sr-only" for="user-instructions">User Instructions</label>
<textarea class="form-textarea block w-full text-sm rounded-lg border border-[var(--border-color)] bg-white focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] resize-none text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] p-3" id="user-instructions" placeholder="Enter your instructions here..." rows="3"></textarea>
</div>
<div class="flex justify-end">
<button class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[var(--primary-color)] text-[var(--text-primary)] hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] transition-colors duration-150" type="button">
                  Send
                  <svg class="ml-2" fill="currentColor" height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M224.39,129.61l-80,80A8,8,0,0,1,128,200V136H40a8,8,0,0,1,0-16h88V56a8,8,0,0,1,16.39-5.61l80,80A8,8,0,0,1,224.39,129.61Z"></path>
</svg>
</button>
</div>
</div>
<details class="mt-4 group">
<summary class="flex items-center justify-between cursor-pointer py-2 text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                Optional: Advanced Settings (Agent Selector)
                <svg class="group-open:rotate-180 transition-transform duration-200" fill="currentColor" height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path>
</svg>
</summary>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border border-[var(--border-color)] rounded-lg p-4 hover:shadow-lg transition-shadow duration-200">
<div class="flex items-start gap-3">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-lg size-16 shrink-0 border border-[var(--border-color)]" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB0tsX4smz7Riiv0KuBo0i6NXSRKYEywD9FQHdO1zM2UpZSHAXlJB5OEvqhte8rnoNh7HKM7ZVZKoGVmNyhArUDVvsZvBedEggO2GPWa71t0b9Wd1GUJbXWBAKHp8j1qr6FCPNJQoPegqOiHeazan90M_EE6CBzLh5Js8j3_zX-hdXPrPvB_kOOuhL7GxBz4NjSA0GwbDc4XoKzK-dRgJH7p_XOsOOcpXWCQzvoWM-vZzt3uqkBx6Ufb8mHnaug5RBfyCi94qMb-R52");'></div>
<div class="flex-1">
<h4 class="text-sm font-semibold text-[var(--text-primary)]">Sales Analyst</h4>
<p class="text-xs text-[var(--text-secondary)] mt-1">Analyzes sales data and provides insights.</p>
<p class="text-xs text-[var(--text-secondary)] mt-2">
<span class="font-medium text-[var(--text-primary)]">Compatible:</span> Sales Data, CRM Exports
                      </p>
</div>
</div>
</div>
<div class="border border-[var(--border-color)] rounded-lg p-4 hover:shadow-lg transition-shadow duration-200 ring-2 ring-[var(--primary-color)] shadow-lg">
<div class="flex items-start gap-3">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-lg size-16 shrink-0 border border-[var(--border-color)]" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCD2phqUzWJO9i-WQsmmB5cqNo55OXOa1jpVvpiTX-ebZlmIAb9dzL8rXZcVAPwZfIWFroKSVfzaEeIExsoz4IrYn7cb0hzTTJFClWAviNQDYQVFKwFRz8puqioHyEou4cm7DiA1NGm2lZ7sqXbykyWeV2RAe3V-wjNcUn6L0-dBCSIHrO2Rf8BnM2kZAjKysgGi9Ij8cyTqRB_XRuuEf6xo4B6BENJbPWXAz0VYvFvlKPKdGCDGZNCFEIAqUlTx4M5NqtzZ3tWXuhP");'></div>
<div class="flex-1">
<h4 class="text-sm font-semibold text-[var(--text-primary)]">Customer Feedback Analyzer</h4>
<p class="text-xs text-[var(--text-secondary)] mt-1">Analyzes customer feedback and identifies trends.</p>
<p class="text-xs text-[var(--text-secondary)] mt-2">
<span class="font-medium text-[var(--text-primary)]">Compatible:</span> Survey Results, Support Tickets
                      </p>
</div>
</div>
</div>
</div>
</details>
</div>
</main>
</div>
</div>

</body></html>